<style>
    .container-{{ context.rnd }} {
        width: {{ context.container_width }}px;
    }

    .container-{{ context.rnd }} input[type=radio] {
        display: none;
    }

    .tabs-{{ context.rnd }} {
        font-family: -apple-system, 'Helvetica Neue', 'Helvetica', 'Arial', 'Lucida Grande', sans-serif;
        -webkit-font-smoothing: antialiased;
        display: flex;
        align-items: center;
        justify-content: flex-start;
    }

    .tabs-{{ context.rnd }} label {
        text-align: center;
        flex: 1 1 auto;
        font-size: 12px;
        padding: 5px 9px;
        margin: 0;
        border-bottom: 2px solid #9edae5;
        border-bottom-style: inset;
        transition: border 0.3s ease;
    }

    .tabs-{{ context.rnd }} label:hover {
        background: rgba(0, 0, 0, 0.1);
    }

    .tabs-{{ context.rnd }} input:checked+label {
        border-bottom: 2px solid #1f77b4;
        border-bottom-style: inset;
    }

    .contents-{{ context.rnd }}>div:nth-of-type(n+2) {
        display: none;
        flex-flow: column nowrap;
        align-items: flex-end;
        background: white;
    }

    {% if not (context.comparison_stats or context.tabledata) %}
    .contents-{{ context.rnd }}>div:nth-of-type(1) {
        display: flex;
        flex-flow: column nowrap;
        align-items: flex-end;
        background: white;
    }
    {% endif %}

    .contents-{{ context.rnd }}>div {
        animation: fadeIn .3s;
    }

    @keyframes fadeIn {
        from { opacity: 0; }
          to { opacity: 1; }
    }

    /*      
    Make sure the stat layout in plot(df, x) is correct if you want to change the height. 
    */
    .stats-{{ context.rnd }} {
        display: flex;
        flex-flow: column wrap;
        justify-content: flex-start;
        max-height: 550px;
        flex-grow: 1;
    }

    .stats-{{ context.rnd }} > div {
        flex: 0 1 auto;
        margin: 5px 5px;
        min-width: 180px;
    }

    .stats-{{ context.rnd }} h3 {
        text-align: center;
        font-size: 14px;
    }

    .stats-{{ context.rnd }} table {
        font-family: -apple-system, 'Helvetica Neue', 'Helvetica', 'Arial', 'Lucida Grande', sans-serif;
        -webkit-font-smoothing: antialiased;
        border-collapse: collapse;
        font-size: 12px;
        table-layout: auto;
        width: 100%;
    }

    .stats-{{ context.rnd }} table th {
        text-align: left;
        border-bottom: 1px solid #cccccc;
    }

    .stats-{{ context.rnd }} table td {
        text-align: left;
        border-bottom: 1px solid #cccccc;
    }

    .insight-container-{{ context.rnd }} {
        width: 405px;
        height: 0;
        position: relative;
        top: 10px;
        right: 5px;
    }

    .insight-btn-{{ context.rnd }} {
        filter: invert(73%) sepia(44%) saturate(243%) hue-rotate(181deg) brightness(87%) contrast(87%);
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='currentColor' class='exclamation-circle w-6 h-6'%3E%3Cpath fill-rule='evenodd' d='M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z' clip-rule='evenodd'%3E%3C/path%3E%3C/svg%3E");
        background-size: 20px;
        background-repeat: no-repeat;
        width: 20px;
        height: 20px;
        opacity: 0.5;
        cursor: pointer;
        display: block;
        position: relative;
        left: 365px;
        bottom: 2px;
        margin: 0;
        z-index: 1;
    }

    .insight-btn-{{ context.rnd }}:hover {
        opacity: 1;
    }

    .insight-check-{{ context.rnd }}:checked~.insight-btn-{{ context.rnd }} {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='currentColor' class='x-circle w-6 h-6'%3E%3Cpath fill-rule='evenodd' d='M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z' clip-rule='evenodd'%3E%3C/path%3E%3C/svg%3E");
    }

    .insight-panel-{{ context.rnd }} {
        position: inherit;
        color: #141212;
        border: 1px solid #444444;
        opacity: 0;
        background-color: #212121;
        transition: all .2s ease;
        border-radius: 5px;
        max-height: 320px;
        overflow: auto;
        box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14),
            0 1px 5px 0 rgba(0, 0, 0, .12),
            0 3px 1px -2px rgba(0, 0, 0, .2);
    }

    .insight-check-{{ context.rnd }}:checked~.insight-panel-{{ context.rnd }} {
        opacity: 0.9;
        z-index: 1;
    }

    .insight-panel-{{ context.rnd }} ol {
        padding-right: 1em !important;
        margin: 1em 0 !important;
    }

    .insight-panel-{{ context.rnd }} .entry-{{ context.rnd }} {
        color: #fff;
        font-weight: 500;
        font-size: 12px;
        margin: 5px 0;
        hyphens: auto;
    }

    .col-name-{{ context.rnd }} {
        font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
        font-size: 90%;
        background-color: #f9f2f4;
        border: 1px solid #5DADE2;
        border-radius: 4px;
        padding: 0 4px;
        display: inline-block;
        max-width: 250px;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
        vertical-align: middle;
        color: #000000;
    }

    .htg-btn-{{ context.rnd }} {
        filter: invert(73%) sepia(44%) saturate(243%) hue-rotate(181deg) brightness(87%) contrast(87%);
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z' /%3E%3C/svg%3E");
        background-size: 20px;
        background-repeat: no-repeat;
        width: 20px;
        height: 20px;
        opacity: 0.5;
        cursor: pointer;
        position: relative;
        left: 385px;
        bottom: 2px;
        margin: 0;
        display: block;
        z-index: 1;
    }

    .htg-btn-{{ context.rnd }}:hover {
        opacity: 1;
    }

    .htg-entry-{{ context.rnd }} {
        border: 1px solid white;
        border-radius: 5px;
        background: rgba(0, 0, 0, 0.1);
        color: #ffffffe0;
        padding: 10px;
        margin: 5px 0px;
    }

    .htg-entry-conf-{{ context.rnd }} {
        font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
        font-size: 85%;
        background: rgb(187, 71, 103);
        width: fit-content;
        border: 1px solid white;
        border-radius: 2px;
        padding: 2px 5px;
    }

    .htg-entry-desc-{{ context.rnd }} {
        font-family: sans-serif;
        font-size: 110%;
        color: #909599;
        cursor: default;
    }

    .htg-copy-btn-{{ context.rnd }} {
        border: 1px solid white;
        border-radius: 5px;
        margin: auto 25%;
        width: 50%;
        margin-top: 10px;
    }

    .htg-copy-btn-{{ context.rnd }}:hover {
        background: #5DADE2;
    }

    {# Freq table #}
    table.freq {
        margin-top: 30px;
        margin-bottom: 2em;
        border: 0;
        width:100%;
    }

    table.freq th, table.freq tr, table.freq td {
        border: 0;
        padding: 0;
    }

    .freq thead {
        font-weight: 600;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: 14px;
    }

    {# Message classes #}
    .missing {
        color: #d62728;
    }

    .ignore {
        opacity: 0.4;
    }

    {# Bars in tables #}
    .freq.table{
        table-layout: fixed;
    }

    .freq:not(.mini) tr td:nth-child(1), .freq:not(.mini) tr th:nth-child(1){
        width: auto;
        max-width: none;
        text-align: left;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .freq:not(.mini) tr td:nth-child(2), .freq:not(.mini) tr td:nth-child(3), .freq:not(.mini) tr th:nth-child(2), .freq:not(.mini) tr th:nth-child(3){
        width: auto;
        text-align: right;
    }

    .freq .bar {
        float: left;
        width: 0;
        height: 100%;
        line-height: 20px;
        color: #fff;
        text-align: center;
        background-color: #1f77b4;
        border-radius: 3px;
        margin-right: 4px;
    }

    .other .bar {
        background-color: #7f7f7f;
    }

    .missing .bar {
        background-color: #d62728;
    }
    #comp-label-{{ context.rnd }} td {
        font-weight: 800;
        font-size: 15px;
    }
    .plot-legend-{{ context.rnd }} {
        display: flex;
        align-items: center;
        justify-content: center;
        max-width: {{ context.container_width }}px;
        background-color: white;
        cursor: default;
    }

    .plot-legend-{{ context.rnd }}:hover .legend-color-{{ context.rnd }} {
        filter: unset;
    }

    .legend-bar-{{ context.rnd }} {
        height: 20px;
        display: flex;
        justify-content: center;
        align-items: center;
        flex: 0 1 150px;
    }

    .legend-color-{{ context.rnd }} {
        width: 15px;
        height: 15px;
        filter: opacity(0.6);
        border: 1px solid #444444;
    }

    .legend-label-{{ context.rnd }} {
        text-align: center;
        margin: 0 10px;
        color: #444444
    }
</style>